<template>
  <div>
    <div style="margin: 20px 0" class="btn_box">
      <el-button type="primary" @click="handleAdd">创建角色</el-button>
      <el-button
        type="primary"
        :disabled="currentRow == null ? true : false"
        @click="roleAuthVisible = true"
        >设置角色权限</el-button
      >
    </div>
    <el-table
      class="role_table"
      ref="singleTable"
      :data="roleList"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
      border
      height="380"
    >
      <el-table-column type="index" width="60" label="序号"></el-table-column>
      <el-table-column property="name" label="角色名称"></el-table-column>
      <el-table-column
        property="create_time"
        label="创建时间"
        :formatter="resetDate"
      ></el-table-column>
      <el-table-column
        property="auth_time"
        label="授权时间"
        :formatter="resetDate"
      ></el-table-column>
      <el-table-column property="auth_name" label="授权人"></el-table-column>
    </el-table>
    <!-- 添加角色对话框 -->
    <el-dialog v-model="roleFormVisible" title="添加角色" width="500px">
      <el-form
        :model="role"
        ref="roleFormRef"
        label-width="100px"
        label-position="right"
        style="width: 400px"
        :rules="rules"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="role.name" placeholder="请输入角色名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addData(roleFormRef)">
            确定
          </el-button>
          <el-button @click="roleFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 设置角色权限弹窗 -->
    <el-dialog v-model="roleAuthVisible" title="这是角色权限" width="500px">
      <Auth :role="currentRow" v-if="roleAuthVisible" ref="authRef"></Auth>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updateData">确定</el-button>
          <el-button @click="roleAuthVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Auth from "./components/Auth.vue";
import useUserStore from "@/store/modules/user";
// FormInstance 当你创建一个表单时，你可以使用这个类型来获取表单实例的属性和方法
// FormRules 定义表单验证规则的对象类型(类型校验)
import { FormInstance, FormRules } from "element-plus";
import { reactive, ref, onMounted, nextTick } from "vue";
// 引入格式化日期的方法
import { formateDate } from "@/utils/dateUtils";
const resetDate = (row: any, colum: any, cellValue: number, index: number) => {
  return formateDate(cellValue);
};
// 角色的类型
import type { roleInfoData } from "@/api/role/type";
import useRoleStore from "@/store/modules/role";
// 角色小仓库
let useStore = useRoleStore();
let userStore = useUserStore();
// 当前选中行
let currentRow = ref(null);
// 获取数据列表
let roleList = ref<roleInfoData[] | undefined>([]);
// 角色
let role = reactive({
  name: "",
});

// 对表单进行校验
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
});
// 添加角色是否显示
const roleFormVisible = ref(false);
// 设置角色权限是否显示
const roleAuthVisible = ref(false);
// 点击添加角色是否弹出显示
const roleFormRef = ref<FormInstance>();

// 确定当前选中的是哪一行
const handleCurrentChange = (val: any) => {
  currentRow.value = val;
};
// 创建角色（点击添加）
const handleAdd = () => {
  roleFormVisible.value = true;
  nextTick(() => {
    // resetFields() 是 Form 组件实例的方法，它将所有表单字段的值重置为初始值，并清除任何验证错误
    roleFormRef.value.resetFields();
  });
};
// 添加角色
const addData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      useStore.useAddRole(role).then((response) => {
        roleFormVisible.value = false;
        getRoleList();
      });
    } else {
      return false;
    }
  });
};

const authRef = ref();
const updateData = () => {
  const newRole = authRef.value.getMenus();
  currentRow.value.menus = newRole.menus;
  currentRow.value.name = newRole.name;
  currentRow.value.auth_name = userStore.user?.username;
  useStore.useUpdateRole(currentRow.value).then((response) => {
    // 关闭弹窗
    roleAuthVisible.value = false;
    // 刷新数据列表
    getRoleList();
  });
};

// 获取角色列表（显示角色列表）
const getRoleList = () => {
  useStore.roleList().then(() => {
    roleList.value = useStore.roles;
  });
};
// 渲染列表
onMounted(() => {
  getRoleList();
});
</script>

<style></style>
